<template>
  <div class="toggle">
    <div>
      <div class="word">选择类型</div>
      <div class="select" style="width: 160px;">
        <el-select v-model="type" placeholder="请选择你所需要的代码类型">
          <el-option v-for="(x, y) in codeList" :key="y" :value="x.value" :label="x.label">
          </el-option>
        </el-select>
      </div>
      <div class="btn"><el-button @click="toggle">转化</el-button></div>
      <div class="btn"><el-button @click="copy">复制</el-button></div>
      <div class="btn"><el-button @click="clear">清空</el-button></div>
    </div>
    <div>
      <div class="word">输入代码</div>
      <div class="text"><el-input v-model="code" type="textarea" :rows="10"></el-input></div>
    </div>
    <div>
      <div class="word">转化代码</div>
      <div class="text"><el-input v-model="result" type="textarea" :rows="10"></el-input></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import element  from '@/utils/element';
const code = ref('')
const result = ref('')
const type = ref(0)
const selectList = [
  'function 转 const',
  'java 转 obj',
  'eltable 转 const',
  'returndata 转 constRef',
  'excel 转 obj'
]
const codeList = []
selectList.map((x, y) => {
  codeList.push({
    label: x,
    value: y
  })
})

const functionToConst = (code) => {
  return code
    .replace(/function/g, "const")
    .replace(/\(/g, " = (")
    .replace(/\)/g, ") => ")
}

const copy = () => {
  navigator.clipboard.writeText(result.value).then(() => {
    element.success('复制成功')
  })
}

const javaToObj = (code) => {
  return code
    .replace(/@Excel\(name = /g, "{\ntitle:")
    .replace(/private String /g, "name: \"")
    .replace(/\)/g, ",")
    .replace(/;/g, "\",\nwidth: 180\n},");
}

const tableToObj = (code) => {
  return code
    .replace(/<el-table-column label=/g, "{\ntitle:")
    .replace(/ align="center" prop=/g, ",\nname: ")
    .replace(/\/>/g, ",\nwidth: 80\n},");
}

const returndataToconstRef = (code) => {
  return code
    .replace(/return {/g, 'const')
    .replace(/}/g, ');')
    .replace(/:/g, '= ref(')
    .replace(/,/g, ');\nconst ')
    .replace(/const \n/g, 'const ')
}

const excelToObj = (code) => {
  let arr = code.split('\n')
  let columns = arr[0].split('\t')
  let list = []
  function arrToObj(col, sz){
    let obj = {}
    col.map((x,y)=>{
      if(sz.length>1){
        obj[x] = sz[y]
      }
    })
    return obj
  }

  arr.map((x, y)=>{
    if(y > 0 && x!=''){
      list.push(
        arrToObj(columns, x.split('\t'))
      )
    }
  })
  // console.log(list)
  let str = JSON.stringify(list)
  .replace(/},/g, '},\n')
  .replace(/\[/g, '\[\n')
  .replace(/\]/g, '\n\]')
  .replace(/{/g, '\t{')
  .replace(/{"/g, '{')
  .replace(/":/g, ':')
  .replace(/,"/g, ',')
  return str
}

const toggle = () => {
  switch (type.value) {
    case 0:
      result.value = functionToConst(code.value)
      break;
    case 1:
      result.value = javaToObj(code.value)
      break;
    case 2:
      result.value = tableToObj(code.value)
      break;
    case 3:
      result.value = returndataToconstRef(code.value)
      break;
    case 4:
      result.value = excelToObj(code.value)
      break;
  }
}

const clear = () => {
  code.value = ''
  result.value = ''
}
</script>

<style scoped lang="scss">
.toggle {
  >div {
    display: flex;
    margin-bottom: 10px;

    .word {
      width: 100px;
      color: #ccc;
      display: flex;
      font-size: 14px;
      justify-content: center;
      align-items: center;
    }

    .input {
      width: 600px;
    }

    .text {
      width: 600px;
    }

    .btn {
      width: 60px;
      margin-left: 10px;
    }
  }
}
</style>
